import React from 'react'
import { Breadcrumb as AntdBreadcrumb  } from 'antd'
import { Link } from 'react-router-dom'

import routes from '@/config/routes'

export default function Breadcrumb() {
    return (
        <AntdBreadcrumb
            style={{
                margin: '16px 0',
            }}
            itemRender={itemRender}
            items={getItems()}
        />
    )
}

function getItems() {
    return routes.map(route => {
        return {
            key: route.path,
            title: route.name
        }
    })
}

function itemRender(currentRoute, params, items, paths) {
    const isLast = currentRoute?.path === items[items.length - 1]?.path;

    return isLast ? (
        <span>{currentRoute.title}</span>
    ) : (
        <Link to={`/${paths.join("/")}`}>{currentRoute.title}</Link>
    );
}